<template>
  <div class="sub-content">
    <div class="top flex_between" ref="top">
      <p>
        <span></span> {{ title }}
      </p>
      <div class="select-box flex_between" :style="{
          flex: selectBoxFlex,
          justifyContent: selectBoxJustifyContent,
        }">
        <slot name="left-select"></slot>
        <slot name="right-select"></slot>
      </div>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
  import setRem from "@/utils/px2remref";
  export default {
    components: {},
    props: {
      title: {
        type: String,
        default: "",
      },
      selectBoxFlex: {
        type: String,
        default: "none",
      },
      selectBoxFlex: {
        type: String,
        default: "none",
      },
      height: {
        type: [String, Number],
        default: "52",
      },
    },
    computed: {
      //标题选择器居中样式配置
      //这个函数就是getter
      selectBoxJustifyContent: function () {
        let str = "flex-end";
        if (this.selectBoxFlex == "1") {
          str = "space-between";
        } else {
          str = "flex-end";
        }
        return str;
      },
    },
    created() { },
    mounted() {
      // this.initStyle()
    },
    methods: {
      // initStyle() {
      //   this.$nextTick(() => {
      //     this.$refs.top.style.height =
      //       (Number(this.height) * setRem()) / 16 + "px";

      //   });
      // },
    },
  };
</script>
<style lang="scss" scoped>
  .sub-content {
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    .top {
      width: 100%;
      height: 52px;


      p {
        font-family: PingFang SC-Bold;
        font-weight: 400;
        text-align: left;
        color: #ffffff;
        line-height: 55px;
        letter-spacing: 0.36px;
        font-size: 22px;
        margin-right: 10px;
        display: flex;
        font-family: PingFang SC-Bold;
        align-items: center;

        span {
          display: inline-block;
          width: 4px;
          height: 30px;
          background-color: #66E4FF;
          margin-right: 8px;
        }
      }

      .select-box {
        /* justify-content: space-between; */
        width: auto;
        flex: none;
        height: 100%;
        margin-top: 6px;
      }
    }

    .content {
      width: 100%;
      /* background-color: red; */
      height: calc(100% - 50px);
    }
  }
</style>